<%@page contentType="text/html; charset=utf-8"%>
<%@include file="/WEB-INF/views/commons/tags.jspf" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>上传文件</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<link rel="stylesheet" href="${ctx}/resources/webuploader-0.1.5/webuploader.css" />    
    <script type="text/javascript" charset="utf-8" src="${ctx}/resources/js/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctx}/resources/webuploader-0.1.5/webuploader.js"></script>
    <style type="text/css">
    	.uploader-list{
    		height:300px;
    		border:1px solid blue;
    	}
    </style>
    <script type="text/javascript">
    $(function(){
    	var uploader = WebUploader.create({
    		server: "${ctx}/demo/uploader",
    		swf: "${ctx}/resources/webuploader-0.1.5/Uploader.swf",
    		pick: {
    			id: "#filePicker",
    			multiple: true,
    		},
    		resize: false,
    		//auto: true
    	});
    	
    	// 当有文件添加进来的时候
    	uploader.on("fileQueued", function(file) {
    		var $list = $("#fileList"), thumbnailWidth=100, thumbnailHeight=100 ;
    		var $li = $(
    				   "<div id='"+file.id+"' class='file-item thumbnail'>"+
    				   		"<img>"+
    				   		"<div class='info'>"+file.name+"</div>"+
    				   "</div>"
    				   ),
  				$img = $li.find("img");
    		
    		$list.append($li);
    		
    		// 创建缩略图
    	    // 如果为非图片文件，可以不用调用此方法。
    	    // thumbnailWidth x thumbnailHeight 为 100 x 100
    		uploader.makeThumb( file, function( error, src ) {
    	        if ( error ) {
    	            $img.replaceWith('<span>不能预览</span>');
    	            return;
    	        }

    	        $img.attr( 'src', src );
    	    }, thumbnailWidth, thumbnailHeight );
    	});
    	
    	
    	$("#btoUpload").on("click", function(){
    		uploader.upload();
    	});
    });
    </script>
</head>

<body>
<h1><a href="${BackURL}">返回上一个页面</a></h1><hr/>


<div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择图片</div>
    <button id="btoUpload">开始上传</button>
</div>

</body>

</html>